<template>
  <div>
    <el-container>
      <!-- 头部导航模块 -->
      <el-header class="min_width">
        <nav-bar ></nav-bar>
        <div class="banner">
          <img src="../assets/img/b-banner.jpg" alt="" style="width: 100%" />
        </div>
      </el-header>
<!--      主体部分-->
      <el-main style="margin: 7% 10% 0px 10%;">
        <div style="height: 50px">
          <img src="../assets/img/history.png" style="width: 50px;height: 50px;float: left">
          <div style="display: inline-block;height: 50px;vertical-align: middle;line-height: 50px" class="demo-input-suffix">
              <span style="font-weight: bold;font-size: 20px">历史记录</span>
              <el-input
                  placeholder="搜索历史纪录"
                  style="width: 200px;margin-left: 700px;"
                  v-model="text1"
                  >
                <i slot="prefix" class="el-input__icon el-icon-search search" @click="findall"></i>
              </el-input>
              <el-button plain size="small" style="margin-left: 20px" @click="delAllHistory">清空历史记录</el-button>
          </div>
        </div>
        <div v-if="historyList==''" style="text-align: center">
          <img src="../assets/img/nodata.png">
        </div>
        <div v-if="historyList!=''">
          <el-row>
            <div style="height: 130px;padding: 30px 0px" v-for="his in historyList">
             <span style="font-size: 15px;color: #4d4d4d;height: 130px;margin-left: 80px;border-left: 1px solid;line-height: 100px;display: inline-block;padding-left: 20px;float: left;width: 200px" >
               {{his.history_createtime|formatDate}}
             </span>
              <el-image style="width: 150px;height: 100px;display: inline-block;border-radius: 5%;float: left"  @click="jumpPath(his.history_videoid)" :src="his.video_cover"></el-image>
              <div style="display: inline-block;height: 100px;margin-left:50px;border-bottom: 1px solid #4d4d4d;width: 50%">
                <div  style="font-weight: bold;margin-top: 10px;height: 20px;width: 90%"  >
                  <span class="jumptitle" @click="jumpPath(his.history_videoid)">
                    {{his.video_title}}
                  </span>
                </div>
                <div style="font-size: 13px;color: #4d4d4d;position: relative;top: 50px">
                  <span>{{ his.user_nickname }}</span>|
                  <span style="display:inline-block;">MDV</span>
                </div>
                <img style="width: 20px;height: 20px;float: right;" src="../assets/img/del.png" @click="delHistory(his.history_videoid)"/>
              </div>
            </div>
          </el-row>
          <el-row>
            <el-pagination
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout=" sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </el-row>
        </div>

      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "history",
  data(){
    return{
      userid:'',
      currentPage: 1,
      total:10, // 总条目数
      pages: 5,  // 总页数
      pageNum: 1, // 当前的页码
      pageSizes: [5,10,15,20,30,40,50], // select选项设置：条/页
      pageSize: 5, // 每页显示条目个数
      text1:'',//搜索框文本
      historyList:[]
    }
  },created() {
    var user=JSON.parse(sessionStorage.getItem("user"));
    this.userid=user.userId;
    this.findall()
  },
  methods:{
    delHistory(val){
        this.$http.post("/hemo/system/history/delHistory",{history_videoid:val,userid:this.userid}).then(d=>{
          this.findall()
        })
    },
    delAllHistory(){
      this.$confirm('清空之后就什么都没有了哦~',  {
        cancelButtonText: '取消',
        confirmButtonText: '确定清空',
        center:true
      }).then(() => {
        this.$http.post("/hemo/system/history/delAllHistory",{userid:this.userid}).then(d=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.findall()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    findall(){
      this.$http.post("/hemo/system/history/findAllHistory",{pageNum:this.pageNum,pageSize:this.pageSize,text1:this.text1,userid:this.userid}).then(d=>{
        this.total=d.data.total;
        this.pages=d.data.pages;
        this.pageNum=d.data.pageNum;
        this.pageSize=d.data.pageSize;
        var list=d.data.list;
        var title='';
        var map={}
        // for ( map in list) {
        //   var a='123';
        //   title=map.video_title;
        //   console.log('a'+a.length)
        //   console.log(map)
        //   console.log(title.length)
        //   if(title!== undefined && title!== null && title.length>20){
        //     title=title.substring(0,20)+"...";
        //     map.video_title=title;
        //   }
        // }
        this.historyList=list;
        console.log(list)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.findall();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum=val;
      this.findall()
    },

    // 点击跳转路径
    jumpPath(keyword) {
      // this.$router.push(`/search?keyword=${keyword}`);
      let newUrl = this.$router.resolve({
        path: `/Vedios?id=${keyword}`
      });
      window.open(newUrl.href, "_blank");
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }
  }
}
</script>

<style scoped>
.jumptitle:hover{
  cursor:pointer;
}
.search:hover{
  cursor:pointer;
}
.banner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 9.5vw;
  overflow: hidden;
}
.banner img {
  /* width: 100%; */
  height: 100%;
}
</style>
